import Vue from "vue";
import VueRouter from "vue-router";
// import Home from "../views/Home.vue"; //导入子组件
// let Home = () => import("../views/Home.vue");
// let About = () => import("../views/About.vue");
//路由懒加载
let Home = () => import("../views/Home.vue");
let List = () => import("../views/List.vue");
let Cart = () => import("../views/Cart.vue");
let Mine = () => import("../views/Mine.vue");
let Reg = () => import("../views/Reg.vue");
let Login = () => import("../views/Login.vue");

Vue.use(VueRouter); //安装插件

//views(pages)-页面型组件(路由表涉及的组件) - containers(大的模块)-components(小组件，有复用性，按钮/下拉菜单/轮播图/分页/导航条)

//路由表
const routes = [
  {
    path: "/home",
    component: Home,
    name: "Home",
  },
  {
    path: "/",
    redirect: "/home", //重定向
  },
  {
    path: "/list",
    component: List,
    name: "list",
  },
  {
    path: "/cart",
    component: Cart,
    name: "cart",
  },
  {
    path: "/mine",
    component: Mine,
    name: "mine",
  },
  {
    path: "/reg",
    component: Reg,
    name: "reg",
  },
  {
    path: "/login",
    component: Login,
    name: "login",
  },

  // {
  //   path: "/", //路径
  //   name: "Home", //名字
  //   component: Home, //组件:没有做优化的方式
  // },
  // {
  //   path: "/about",
  //   name: "About",
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   // component: () =>
  //   //   //路由懒加载：优化后的写法，性能更好
  //   //   import(/* webpackChunkName: "about" */ "../views/About.vue"),
  //   component: About,
  // },
];

const router = new VueRouter({
  routes,
});

export default router;
